import { useState } from 'react';
import style from '../select.module.less';

interface IProp {
    title: string;
    data: TypeItemData[];
    onChange: (value: string) => void;
}
export default function TypeItem({ title, data, onChange }: IProp) {
    const [index, setIndex] = useState(0)
    const change = (index: number, value: string) => {
        setIndex(index);
        // 子传父
        onChange(value);
    }
    return <div className={style.item}>
        <div className={style.title}>{title}</div>
        <ul className={style.list}>
            {/* <li className={style.current}>全部</li>
            <li>全部</li> */}
            {
                data.map((item, i) => <li key={item.value} className={i === index ? style.current : ''} onClick={() => change(i, item.value)}>{item.text}</li>)
            }
        </ul>
    </div>
}